
<template>
  <div class="app-container">
    <div>
      <el-form :inline="true" :model="queryForm" ref="queryForm">
        <el-form-item label="公司ID" label-width="120px" prop="comCode">
          <el-input style="width: 240px" v-model="queryForm.comCode" placeholder="请输入公司编码"></el-input>
        </el-form-item>
        <el-form-item label="公司名称" label-width="120px" prop="comName">
          <el-input style="width: 240px" v-model="queryForm.comName" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="是否直营" label-width="120px" prop="status">
          <el-radio v-model="queryForm.status" label="1" style="margin-left: 30px">是</el-radio>
          <el-radio v-model="queryForm.status" label="0">否</el-radio>
        </el-form-item>
        <el-form-item style="margin-left: 80px">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getCompanyList">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="companyList" v-loading="loading" style="width: 100%" border>
      <el-table-column label="公司ID" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公司名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.comName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="城市" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.city }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否直营" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册人数" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.count }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              @click="showPermissionConfig(scope.row.id)"
              >
              权限配置
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="companyList.length > 0" :total="total" :page.sync="queryForm.currentPage" :limit.sync="queryForm.pageSize" @pagination="getCompanyList" />

    <!-- 权限管理的弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      style="margin-top: 20vh"
      :before-close="handleClose">
      <template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedFunction" @change="handleCheckedFunctionsChange" class="checkBox_group">
          <el-checkbox v-for="(item,index) in functionList" :label="item.id" :key="index" class="checkBox_item">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateFunctionPermission">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {getCompanyList, getAllPermission, getCompanyPermission, updateCompanyPermission} from "@/api/shulanAgent/functionPermission"
import {VueDebounce, timeChange} from "@/utils/index"
export default {
  name: "functionPermission",
  data () {
    return {
      checkAll: false,
      checkedFunction: [],
      functionList: [],
      isIndeterminate: true,
      companyId: '', // 选中公司id
      total: 0, // 公司数据总条数 做分页
      companyList: [], // 公司列表
      loading: false, // 表格是否出现加载动画
      dialogVisible: false, // 权限管理弹出框
      queryForm: { // 搜索表单值
        comCode: '', // 公司编码
        comName: '', // 公司名称
        status: '', // 是否直营
        currentPage: 1,
        pageSize: 20
      }
    };
  },
  created() {
    this.getAllPermission()
    this.getCompanyList()
    this.getCompanyList = VueDebounce(this.getCompanyList, 300)
    this.updateFunctionPermission = VueDebounce(this.updateFunctionPermission, 300)
    // 一定要在create里面执行一下写的回车事件enterSearch(),否则会执行不了
    this.enterSearch()
  },
  methods: {
    // 回车搜索
    enterSearch(){
      document.onkeydown = e =>{
        //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
        if (e.keyCode === 13 && e.target.baseURI.match(/functionPermission/)) {
          //回车后执行搜索方法
          if(this.queryForm.comCode || this.queryForm.comName || this.queryForm.status) {
            this.getCompanyList()
          }
        }
      }
    },
    // 获取所有权限列表
    getAllPermission() {
      let that = this
      getAllPermission().then(res => {
        if(res.code == 200) {
          that.functionList = res.data
        }
      })
    },
    // 获取公司列表
    getCompanyList() {
      let that = this
      this.loading = true
      getCompanyList(this.queryForm).then(res => {
        if(res.code == 200) {
          that.companyList = res.data.list
          this.total = res.data.total
          that.loading = false
          if(res.data.list.length == 0) {
            that.$message('搜索结果显示数据为0条记录')
          }
        }
      }).catch((err) => {
        console.log('接口出错了', err)
      });
    },
    // 重置搜索表单
    resetQuery() {
      this.$refs['queryForm'].resetFields();
      this.getCompanyList()
    },
    // 弹出权限配置对话框
    showPermissionConfig(id) {
      // 将公司id保存起来 修改新增权限需要使用
      this.companyId = id
      getCompanyPermission(id).then(res => {
        if(res.code == 200) {
          this.dialogVisible = true
          let arr = []
          res.data.forEach(item => {
            arr.push(item.id)
          })
          this.checkedFunction = arr
          this.checkAll = this.functionList.length === arr.length
          if(!this.checkAll && arr.length !== 0) {
            this.isIndeterminate = true
          }else if(!this.checkAll && arr.length === 0) {
            this.isIndeterminate = false
          }
        }
      })
    },
    // 右上角x号关闭弹窗
    handleClose() {
      this.dialogVisible = false
    },
    handleCheckAllChange(val) {
      let arr = []
      this.functionList.forEach(item => {
        arr.push(item.id)
      })
      this.checkedFunction = val ? arr : [];
      this.isIndeterminate = false;
    },
    handleCheckedFunctionsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.functionList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.functionList.length;
    },
    // 更新权限
    updateFunctionPermission() {
      console.log(this.checkedFunction)
      let that = this
      updateCompanyPermission({
        comId: that.companyId,
        idList: that.checkedFunction
      }).then(res => {
        if(res.code == 200) {
          this.$message(res.msg)
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .checkBox_group {
    display: flex;
    flex-wrap: wrap;
  }
  .checkBox_item {
    width:27%;
    margin-bottom: 10px;
  }
</style>
